
/**
 * DIY编辑器核心逻辑
 */

import { reactive, computed } from 'vue'
import { COMPONENT_TYPES, EVENT_TYPES } from './constants.js'
import { createComponent, deepClone, validateComponentConfig } from './utils/index.js'

/**
 * 创建DIY编辑器实例
 * @param {Object} options 初始配置
 * @returns {Object} 编辑器实例
 */
export function createDiyEditor(options = {}) {
  // 编辑器状态
  const state = reactive({
    // 页面配置
    pageConfig: {
      title: options.pageTitle || '页面标题',
      backgroundColor: options.backgroundColor || '#ffffff',
      backgroundImage: options.backgroundImage || '',
      margin: options.margin || 0
    },

    // 组件列表
    components: options.components || [],

    // 当前选中的组件索引
    selectedComponentIndex: -1,
    
    // 当前选中的组件对象
    selectedComponent: null,

    // 历史记录（用于撤销/重做）
    history: {
      past: [],
      future: []
    },

    // 编辑器配置
    editorConfig: {
      showGrid: options.showGrid || false,
      snapToGrid: options.snapToGrid || false,
      gridSize: options.gridSize || 10
    }
  })

  // 计算属性
  const computedState = {
    // 当前选中的组件
    selectedComponent: computed(() => {
      return state.selectedComponentIndex >= 0 
        ? state.components[state.selectedComponentIndex] 
        : null
    }),

    // 是否可以撤销
    canUndo: computed(() => state.history.past.length > 0),

    // 是否可以重做
    canRedo: computed(() => state.history.future.length > 0)
  }

  // 事件监听器
  const eventListeners = {}

  // 触发事件
  function emit(eventName, data) {
    if (eventListeners[eventName]) {
      eventListeners[eventName].forEach(listener => listener(data))
    }
  }

  // 添加事件监听器
  function on(eventName, listener) {
    if (!eventListeners[eventName]) {
      eventListeners[eventName] = []
    }
    eventListeners[eventName].push(listener)
  }

  // 移除事件监听器
  function off(eventName, listener) {
    if (eventListeners[eventName]) {
      const index = eventListeners[eventName].indexOf(listener)
      if (index > -1) {
        eventListeners[eventName].splice(index, 1)
      }
    }
  }

  // 记录历史
  function recordHistory() {
    // 深度克隆当前状态
    const currentState = deepClone({
      pageConfig: state.pageConfig,
      components: state.components
    })

    // 添加到历史记录
    state.history.past.push(currentState)

    // 限制历史记录数量
    if (state.history.past.length > 50) {
      state.history.past.shift()
    }

    // 清空未来记录
    state.history.future = []
  }

  // 组件操作
  const componentActions = {
    /**
     * 添加组件
     * @param {string} type 组件类型
     * @param {Object} config 组件配置
     * @param {number} index 插入位置（可选，默认添加到末尾）
     * @returns {Object} 添加的组件
     */
    addComponent(type, config = {}, index) {
      // 创建组件
      const component = createComponent(type, config)
      
      // 验证组件配置
      const validation = validateComponentConfig(type, component.data)
      if (!validation.valid) {
        console.error('组件配置验证失败:', validation.errors)
        return null
      }

      // 添加到组件列表
      if (typeof index === 'number' && index >= 0 && index <= state.components.length) {
        state.components.splice(index, 0, component)
      } else {
        state.components.push(component)
      }

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_ADD, { component, index })

      return component
    },

    /**
     * 删除组件
     * @param {number} index 组件索引
     * @returns {boolean} 是否删除成功
     */
    removeComponent(index) {
      if (index < 0 || index >= state.components.length) {
        return false
      }

      // 记录被删除的组件
      const removedComponent = state.components[index]

      // 删除组件
      state.components.splice(index, 1)

      // 如果删除的是当前选中的组件，取消选中
      if (state.selectedComponentIndex === index) {
        state.selectedComponentIndex = -1
      } else if (state.selectedComponentIndex > index) {
        state.selectedComponentIndex--
      }

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_REMOVE, { component: removedComponent, index })

      return true
    },

    /**
     * 更新组件
     * @param {number} index 组件索引
     * @param {Object} updates 更新内容
     * @returns {boolean} 是否更新成功
     */
    updateComponent(index, updates) {
      if (index < 0 || index >= state.components.length) {
        return false
      }

      // 验证更新内容
      const component = state.components[index]
      const validation = validateComponentConfig(component.type, {
        ...component.data,
        ...updates
      })

      if (!validation.valid) {
        console.error('组件配置验证失败:', validation.errors)
        return false
      }

      // 更新组件
      console.log('Editor updateComponent with updates:', updates)
      if (updates.data) {
        console.log('Editor updating component.data:', updates.data)
        Object.assign(component.data, updates.data)
      } else if (updates.styles) {
        console.log('Editor updating component.styles:', updates.styles)
        Object.assign(component.styles, updates.styles)
      } else {
        console.log('Editor updating component.data with updates:', updates)
        Object.assign(component.data, updates)
      }

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_UPDATE, { 
        component, 
        index, 
        updates 
      })

      return true
    },

    /**
     * 移动组件位置
     * @param {number} fromIndex 起始位置
     * @param {number} toIndex 目标位置
     * @returns {boolean} 是否移动成功
     */
    moveComponent(fromIndex, toIndex) {
      if (fromIndex < 0 || fromIndex >= state.components.length ||
          toIndex < 0 || toIndex >= state.components.length) {
        return false
      }

      // 移动组件
      const component = state.components.splice(fromIndex, 1)[0]
      state.components.splice(toIndex, 0, component)

      // 更新选中索引
      if (state.selectedComponentIndex === fromIndex) {
        state.selectedComponentIndex = toIndex
      } else if (fromIndex < state.selectedComponentIndex && toIndex >= state.selectedComponentIndex) {
        state.selectedComponentIndex--
      } else if (fromIndex > state.selectedComponentIndex && toIndex <= state.selectedComponentIndex) {
        state.selectedComponentIndex++
      }

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_UPDATE, { 
        component, 
        fromIndex, 
        toIndex 
      })

      return true
    },

    /**
     * 选中组件
     * @param {number} index 组件索引
     * @returns {boolean} 是否选中成功
     */
    selectComponent(index) {
      if (index < -1 || index >= state.components.length) {
        return false
      }

      const previousIndex = state.selectedComponentIndex
      state.selectedComponentIndex = index
      state.selectedComponent = index >= 0 ? state.components[index] : null

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_SELECT, { 
        index, 
        previousIndex,
        component: state.selectedComponent
      })

      return true
    },

    /**
     * 复制组件
     * @param {number} index 组件索引
     * @returns {Object|null} 复制的组件
     */
    duplicateComponent(index) {
      if (index < 0 || index >= state.components.length) {
        return null
      }

      // 深度克隆组件
      const originalComponent = state.components[index]
      const duplicatedComponent = deepClone(originalComponent)

      // 生成新ID
      duplicatedComponent.id = generateId()

      // 添加到组件列表
      state.components.splice(index + 1, 0, duplicatedComponent)

      // 选中复制的组件
      state.selectedComponentIndex = index + 1

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.COMPONENT_ADD, { 
        component: duplicatedComponent, 
        index: index + 1 
      })

      return duplicatedComponent
    }
  }

  // 页面配置操作
  const pageActions = {
    /**
     * 更新页面配置
     * @param {Object} updates 更新内容
     * @returns {boolean} 是否更新成功
     */
    updatePageConfig(updates) {
      // 更新页面配置
      Object.assign(state.pageConfig, updates)

      // 记录历史
      recordHistory()

      // 触发事件
      emit(EVENT_TYPES.PAGE_CONFIG_UPDATE, { updates })

      return true
    }
  }

  // 历史操作
  const historyActions = {
    /**
     * 撤销
     * @returns {boolean} 是否撤销成功
     */
    undo() {
      if (state.history.past.length === 0) {
        return false
      }

      // 获取上一个状态
      const previousState = state.history.past.pop()

      // 保存当前状态到未来
      state.history.future.push({
        pageConfig: deepClone(state.pageConfig),
        components: deepClone(state.components)
      })

      // 恢复上一个状态
      Object.assign(state.pageConfig, previousState.pageConfig)
      state.components.splice(0, state.components.length, ...previousState.components)

      // 重置选中状态
      state.selectedComponentIndex = -1

      return true
    },

    /**
     * 重做
     * @returns {boolean} 是否重做成功
     */
    redo() {
      if (state.history.future.length === 0) {
        return false
      }

      // 获取下一个状态
      const nextState = state.history.future.pop()

      // 保存当前状态到过去
      state.history.past.push({
        pageConfig: deepClone(state.pageConfig),
        components: deepClone(state.components)
      })

      // 恢复下一个状态
      Object.assign(state.pageConfig, nextState.pageConfig)
      state.components.splice(0, state.components.length, ...nextState.components)

      // 重置选中状态
      state.selectedComponentIndex = -1

      return true
    },

    /**
     * 清空历史记录
     */
    clearHistory() {
      state.history.past = []
      state.history.future = []
    }
  }

  // 导出/导入操作
  const dataActions = {
    /**
     * 导出为JSON
     * @returns {string} JSON字符串
     */
    exportToJson() {
      return exportToJson(state.pageConfig, state.components)
    },

    /**
     * 从JSON导入
     * @param {string} jsonString JSON字符串
     * @returns {boolean} 是否导入成功
     */
    importFromJson(jsonString) {
      const result = importFromJson(jsonString)

      if (!result.success) {
        console.error('导入失败:', result.error)
        return false
      }

      // 更新页面配置和组件列表
      Object.assign(state.pageConfig, result.pageConfig)
      state.components.splice(0, state.components.length, ...result.components)

      // 重置选中状态
      state.selectedComponentIndex = -1

      // 清空历史记录
      historyActions.clearHistory()

      return true
    }
  }

  // 返回编辑器实例
  return {
    // 状态
    state,
    computedState,

    // 事件系统
    on,
    off,

    // 组件操作
    ...componentActions,

    // 页面配置操作
    ...pageActions,

    // 历史操作
    ...historyActions,

    // 导出/导入操作
    ...dataActions
  }
}
